<template>
    <!-- 头部 -->
        <div class="lgTop">
            <div class="lgHeader">
                <div class="headerLeft">
                    <a href="###">
                        <img src="./images/logomain2.png" alt="">
                    </a>
                    <div class="input-all">
                        <span class="inputSpan">
                            <input class="leftInput" type="text" placeholder="书籍 电影 音乐 小组">
                        </span>
                        <span class="searchSpan">
                            <button></button>
                        </span>
                    </div>
                </div>
                <ul class="headerRight">
                    <li>
                        <router-link to="/book" >读书</router-link>
                    </li>
                    <li>
                        <router-link to="/film">电影</router-link>
                    </li>
                    <li>
                        <router-link to="/music">音乐</router-link>
                    </li>
                    <li>
                        <router-link to="/city" >同城</router-link>
                    </li>
                    <li>
                        <router-link to="/group">小组</router-link>
                    </li>
                    <li>
                        <router-link to="/read" >阅读</router-link>
                    </li>
                    <li>
                        <router-link to="/" >FM</router-link>
                    </li>
                    <li>
                        <router-link to="/time">时间</router-link>
                    </li>
                    <li>
                        <router-link to="/wares">豆品</router-link>
                    </li>
                </ul>
            </div>
        </div>
</template>
<script>
export default {
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
//头部
        .lgTop{
            width: 1080px;
            margin: 0 auto 25px;
            .lgHeader{
                // display: flex;
                display: flex;
                justify-content: space-between;
                width: 100%;
                height: 34px;
                // background: pink;
                .headerLeft{
                    display: flex;
                    align-items: center;
                    a{
                        position: relative;
                        width: 200px;
                        display: block;
                        height: 34px;
                        img {
                            position: absolute;
                            top: 2px;
                            left: -44px;
                            right: 0;
                            bottom: 0;
                            margin: auto;
                            max-width: 100%;
                            max-height: 185%;
                        }
                    }
                    .input-all{
                        vertical-align: middle;
                        position: relative;
                        width: 270px;
                        height: 30px;
                        border: 1px solid #c3c3c3;
                        .inputSpan{
                            width: 240px;
                            height: 30px;
                            display: block;
                            line-height: 30px;
                            .leftInput{
                                box-sizing: border-box;
                                height: 100%;
                                padding: 5px;
                                width: 240px;
                                float: right;
                                border: none;
                                outline: none;
                            }
                            
                        }
                        .searchSpan{
                            position: absolute;
                            right: 0;
                            top: 0;
                            width: 30px;
                            height: 30px;
                            display: block;
                            line-height: 30px;
                            button{
                                box-sizing: border-box;
                                background: url('./images/bn_srh.png') 50% 50% no-repeat;
                                height: 100%;
                                padding: 5px;
                                width: 100%;
                                // border-left: none;
                                border: none;
                                outline: none;
                            }
        
                        }
                    }
                }
                .headerRight{
                    li{
                        float: left;
                        a{
                            width: 40px;
                            height: 34px;
                            font-size: 22px;
                            margin-right: 10px;
                            line-height: 34px;
                            font-weight: 600;
                        }
                    }
                }
                .headerRight li:nth-child(2n) a{
                    color: red;
                }
                .headerRight li:nth-child(2n+1) a{
                    color: rgb(172, 128, 185);
                }
            }
        }
</style>